<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" import="java.util.*,vo.Good"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>宠物商店</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link rel="stylesheet" type="text/css" href="Resources/css/shopShow.css">
	<link rel="stylesheet" type="text/css" href="Resources/layui/css/layui.css">
	<script type="text/javascript" src="Resources/layui/layui.js"></script>
	<!-- 公共样式 开始 -->
	<link rel="stylesheet" type="text/css" href="Resources/css/base.css">
	<link rel="stylesheet" type="text/css" href="Resources/css/iconfont.css">
	<script type="text/javascript" src="Resources/framework/jquery-1.11.3.min.js"></script>
	<link rel="stylesheet" type="text/css" href="Resources/layui/css/layui.css">
	<script type="text/javascript" src="Resources/layui/layui.js"></script>
	<!-- 滚动条插件 -->
	<link rel="stylesheet" type="text/css" href="Resources/css/jquery.mCustomScrollbar.css">
	<script src="Resources/framework/jquery-ui-1.10.4.min.js"></script>
	<script src="Resources/framework/jquery.mousewheel.min.js"></script>
	<script src="Resources/framework/jquery.mCustomScrollbar.min.js"></script>
	<script src="Resources/framework/cframe.js"></script><!-- 仅供所有子页面使用 -->
	<!-- 公共样式 结束 -->
</head>
<body>
	<!--Content-->

	<div class="content">
		<div style="background: #ffc6dd; height: 50px"></div>
		
		<div style="margin-left: 20%;font-size: 20px;width: 60%" >
			<a href="listProduct?status=selectall">返回</a>
			<hr style="color: #000000">
			<br>
		</div>
		<form action="listOrderItem?status=add" method="post">
		<table width="80%" border="0" class="show" style="margin: auto;">
			<tr>
				<td align="center" valign="middle">
				<a href="upload?status=download&fname=${good.gsrc }"><img src="${good.gsrc }" width="300px"></a><br /> 
				<table align="center">
					<tr>
						<td>名字：</td>
						<td>${good.gName} </td>
					</tr>				
					<tr>
						<td>种类：</td>
						<td>${cateName} </td>
					</tr>				
					<tr>
						<td>信息：</td>
						<td>${good.gMsg }</td>
					</tr>				
					<tr>
						<td>价格：</td>
						<td>￥${good.gPrice}</td>
					</tr>				
					<tr>
						<td>库存：</td>
						<td>${good.gnum }</td>
					</tr>				
				</table>
				
				
			</tr>
			<tr>
				<td align="center" valign="middle">
				<input type="hidden" name="gid" value="${good.gid}">
				购买数量： <input type="text" name="num"  required lay-verify="required|text"  />
				</td>
			</tr>
			<tr>
				<td align="center" valign="middle">
				<input type=submit name="addCar"  value="加入购物车" />
				</td>
			</tr>
		</table>
		</form>

		<script>
		
		layui.use(['upload','form'], function() {
			var form = layui.form;
			var upload = layui.upload;
			var layer = layui.layer;
			//监听提交
			//解决了layui.open弹窗从内部关闭这个弹窗的问题
			form.on('submit(submitBut)', function(data) {
				var updateFrame = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
				parent.layer.close(updateFrame);  //再改变当前层的标题
			});
			form.verify({
				//数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
			  	ZHCheck: [
				    /^[\u0391-\uFFE5]+$/
				    ,'只允许输入中文'
			  	] 
			});
		});
		
		
			layui.use([ 'carousel', 'form' ],
					function() {
						var carousel = layui.carousel, form = layui.form;

						//图片轮播
						carousel.render({
							elem : '#test10',
							width : 'auto',
							height : '550px',
							interval : 5000
						});

						var $ = layui.$, active = {
							set : function(othis) {
								var THIS = 'layui-bg-normal', key = othis
										.data('key'), options = {};

								othis.css('background-color', '#5FB878')
										.siblings().removeAttr('style');
								options[key] = othis.data('value');
								ins3.reload(options);
							}
						};

						//监听开关
						form.on('switch(autoplay)', function() {
							ins3.reload({
								autoplay : this.checked
							});
						});

						$('.demoSet').on('keyup', function() {
							var value = this.value, options = {};
							if (!/^\d+$/.test(value))
								return;

							options[this.name] = value;
							ins3.reload(options);
						});

						//其它示例
						$('.demoTest .layui-btn').on('click', function() {
							var othis = $(this), type = othis.data('type');
							active[type] ? active[type].call(this, othis) : '';
						});
					});
		</script>
</body>
</html>